<template>
	<w-layout showNavbar navTitle="设置" :navTitleColor="publicStyles['--color-t1']" background="url('/static/image/bk.png') no-repeat"
		navBackgroundColor="transparent" :scrollTop="page.scrollTop" :navScrollColor="publicStyles['--color-bk']">
		<template #default>
			<view class="container">
				<view class="public-card-10 px-50 pt-60 pb-10">
					<view @click="$u.route(`/pages/parse/parse?type=29&title=规范指引`)" class="fr-ac mb-40 pb-40 u-border-bottom" style="border-color: var(--gray-line) !important;">
						<view class="op-90">
							规范指引
						</view>
						<image class="ml-auto" style="width: 24rpx;height: 24rpx;" src="/static/icon/public/right-fill.png" mode=""></image>
					</view>
					<view @click="$u.route(`/pages/parse/parse?type=4&title=用户协议`)" class="fr-ac mb-40 pb-40 u-border-bottom" style="border-color: var(--gray-line) !important;">
						<view class="op-90">
							用户协议
						</view>
						<image class="ml-auto" style="width: 24rpx;height: 24rpx;" src="/static/icon/public/right-fill.png" mode=""></image>
					</view>
					<view @click="$u.route(`/pages/parse/parse?type=5&title=隐私协议`)" class="fr-ac mb-40 pb-40 u-border-bottom" style="border-color: var(--gray-line) !important;">
						<view class="op-90">
							隐私协议
						</view>
						<image class="ml-auto" style="width: 24rpx;height: 24rpx;" src="/static/icon/public/right-fill.png" mode=""></image>
					</view>
					<view @click="loginout" class="fr-ac mb-40 pb-40 u-border-bottom" style="border-color: var(--gray-line) !important;">
						<view class="op-90">
							切换账号
						</view>
						<image class="ml-auto" style="width: 24rpx;height: 24rpx;" src="/static/icon/public/right-fill.png" mode=""></image>
					</view>
					<view @click="popup.showLogOff = true" class="fr-ac mb-40 pb-40 u-border-bottom" style="border-color: var(--gray-line) !important;">
						<view class="op-90">
							注销账号
						</view>
						<view class="ml-auto op-50 fs-24">
							注销后无法恢复，请谨慎操作
						</view>
						<image class="ml-10" style="width: 24rpx;height: 24rpx;" src="/static/icon/public/right-fill.png" mode=""></image>
					</view>
				</view>
				
				<up-popup :show="popup.showLogOff" @close="popup.showLogOff = false" mode="bottom" :safeAreaInsetBottom="false" bgColor="transparent">
					<view class="fc-ac px-50" style="position: relative;min-height:750rpx;background: linear-gradient(to bottom, #17404D 0%, #001524 100%);">
						<view class="w-100" style="position: absolute;top: 0;left: 0;height: 2px;background: linear-gradient(to right, #184250 0%, #4EB5C8 25% , #E4FBFF 50% , #4EB5C8 75% , #184250 100%);"></view>
						<view class="color pt-60 fs-36 t-c">
							注销账号
						</view>
						
						<view class="mt-40 op-70" style="line-height: 1.6;">
							<up-parse :content="loginout_content"></up-parse>
						</view>
					
						
						<view class="fr-ac gap-40 w-100 mt-auto">
							<view @click="popup.showLogOff = false;" class="public-btn-7 transition py-25 t-c mb-60 flex-1">
								<view class="op-90 fs-32">
									取消
								</view>
							</view>
							<view @click="popupTransferConfirm" class="public-btn-4 transition py-25 t-c mb-60 flex-2">
								<view class="text-color-b fs-32">
									申请注销
								</view>
							</view>
						</view>
					</view>
				</up-popup>
			</view>
		</template>
	</w-layout>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted,
		computed,
		nextTick
	} from 'vue'
	import {
		storeToRefs
	} from 'pinia'
	import {
		onLoad, onPageScroll
	} from '@dcloudio/uni-app'
	import {
		useAppStore
	} from '@/store/app'
	import {
		useColorStore
	} from '@/store/color'
	import {
		get_parse,
		user_logoff
	} from '@/utils/request/api';
	import {
		useUserStore
	} from '@/store/user'
	const userStore = useUserStore()
	const appStore = useAppStore()
	const colorStore = useColorStore()
	const {
		publicStyles
	} = storeToRefs(colorStore)
	onLoad(async(options) => {
		get_parseApi(31)
	})
	onMounted(() => {
		appStore.loadingHandler(false)
	})
	onPageScroll((e)=>{
		page.scrollTop = e.scrollTop
	})
	const page = reactive({
		scrollTop:0
	})
	
	const popup = reactive({
		showLogOff:false,
	})
	async function popupTransferConfirm(){
		const res = await user_logoff({})
		uni.showToast({
			title:'注销成功',
			icon:"success"
		})
		popup.showLogOff = false
		loginout()
	}
	
	const state = reactive({
		
	})
	function loginout(){
		useUserStore().exitLogin()
		uni.clearStorageSync()
		uni.reLaunch({
			url:'/pages/login/index'
		})
	}
	const loginout_content = ref('')
	async function get_parseApi(type){
		const res = await get_parse({
			type
		})
		loginout_content.value = res
	}
</script>

<style lang="scss">
	.container {
		width: 100%;
		min-height: 100%;
		position: relative;
		overflow: hidden;
		box-sizing: border-box;
		padding: 40rpx;
		
	}
	
</style>